<template>
  <view>
    <customtop top_title="添加好友"></customtop>
    <view class="add_friend">
      <view class="search">
        <view class="container">
          <view class="search_box">
            <view class="icon"><i class="iconfont icon-sousuoxiao"></i></view>
            <view class="input"><input class="weui-input" type="text" placeholder="搜索" value="" @input="changeInput_k($event)" /></view>
            <span class="btn" @click="searchFriends">搜索</span>
          </view>
        </view>
      </view>
      <view class="items" v-if="users.length > 0">
        <view class="item" v-for="(item, index) in users" :key="index" @click="jumpPage('/pages/im/friend_index?id=' + item.id)">
          <view class="bd">
            <image class="avatar" :src="item.avatar" mode="scaleToFill" />
            <view class="maininfo">
              <view class="name">{{item.nickname}}</view>
            </view>
            <view class="btnbox">
              <span class="btn" v-if="[0, 4].includes(item.friend_status)">添加</span>
              <span class="span" v-if="[1].includes(item.friend_status)">已添加</span>
              <span class="span" v-if="[2, 3].includes(item.friend_status)">申请中</span>
            </view>
          </view>
        </view>
      </view>
      <u-empty
        v-if="!apply_loading && users.length == 0"
        mode="search"
        icon="http://cdn.uviewui.com/uview/empty/search.png"
        text="搜索结果为空~"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"
export default {
  components: { customtop },

  data() {
    return {
      apply_loading: true,
      k: '',
      users: []
    }
  },

  methods: {
    searchFriends: function() {
      if (this.k == '') {
        uni.showToast({ icon: 'none', title: '请输入搜索内容' });
        return false;
      }
      uni.showLoading();
      request.post('/im/searchFriends', {k: this.k}).then(res => {
        this.apply_loading = false;
        uni.hideLoading();
        this.users = res.data;
      })
    },

    changeInput_k: function(e) {
			this.k = e.detail.value;
		},

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
@import url('im.css');
page {
  padding-bottom: 30rpx;
}
.search {
  width: 100%;

  padding: 15px 0;
}
.search_box {
  background-color: #f7f8fa;
  color: #666;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.search_box .icon {
  margin-right: 6px;
}
.search_box .input {
  flex: 1;
}
.search_box .btn {
  background-color: #00B38A;
  color: #fff;
  padding: 0 10px;
  margin-right: -7px;
  border-radius: 3px;
  height: 56rpx;
  line-height: 56rpx;
}
</style>
